<template>
  <div>
    <van-popup
      v-model="showRadio1"
      closeable
      position="bottom"
      class="radioGroup"
    >
      <div class="radioTitle">
        单选
      </div>
      
      <van-radio-group v-model="radioValue1">
        <van-cell-group>
          <van-cell :title="item" clickable @click="confirm(item) " v-for="(item,index) in radioItems" :key="index">
            <template #right-icon>
              <van-radio :name="item" />
            </template>
          </van-cell>
          <!-- <van-cell title="单选框2" clickable @click="radio ='单选框2',showRadio1=false">
            <template #right-icon>
              <van-radio name="单选框2" />
            </template>
          </van-cell> -->
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>
<script>
export default {
   props: {
    showRadio: {
      type: Boolean,
      default: () => (true),
    },
    radioValue: {
      type: String,
      default: () => ('单选1'),
    },
    radioItems: {
      type: Array,
      default: () => (
      [
        '单选1','单选2'
      ]
      ),
    },
  },
  data() {
    return {
      showRadio1:false,
      radioValue1:'',
      
    };
  },
  created () {
    this.showRadio1=false;
    this.showRadio1=this.showRadio
    console.log('this.showRadio1',this.showRadio1)
    this.radioValue1=this.radioValue
  },
  methods: {
    confirm(item){
      // this.radioValue =item
      console.log('item',item)
      this.$emit('confirmRadio')
      // this.$emit('confirmRadio',item)
      this.showRadio1=false
    }
  },
}
</script>
<style lang="scss" scoped>
.radioGroup{
  max-height:70%;
  text-align:left;
  .radioTitle{
    text-align:left;
    padding-left:16px;
    box-sizing:border-box;
    height:50px;
    line-height:50px;
    border-bottom:1px solid #F8F8FA;
  }
  .bottom{
    height:45px;
    margin-bottom:10px;
    display:flex;
    .li{
      flex:1;
      
      .btn{
        display:flex;
        justify-content: center;
        align-items: center;
        height:45px;
        width:90%;
        margin-left:8%;
        // margin:0 auto;
        border-radius:5px;
        background-color:#fff;
        box-sizing: border-box;
        border:1px solid #2A5AFF;
        color:#2A5AFF;
        &.queding{
          margin-left:2%;
          background-color:#2A5AFF;
          border:1px solid #2A5AFF;
          color:#FFF;
        }
      }
    }
  }
}
</style>